<template>
  <view class="container">
    <!-- 相机组件，占满整个屏幕 -->
    <camera 
      ref="cameraRef"
      id="camera" 
      :device-position="cameraPosition"
      :output-dimension="outputDimension"
      flash="off" 
      class="camera"
      @error="onCameraError">
    </camera>
    
    <!-- 半透明遮罩层 -->
    <view class="overlay"></view>
    
    <!-- 顶部状态栏占位 -->
    <view class="status-bar"></view>
    
    <!-- 底部控制区域 -->
    <view class="control-panel">
      <!-- 左侧收起按钮 -->
      <view class="control-btn" @click="minimize">
        <text class="btn-text">收起</text>
      </view>
      
      <!-- 中间录制控制按钮 -->
      <view class="record-btn-container">
        <view 
          class="record-btn" 
          :class="recording ? 'recording' : ''" 
          @click="toggleRecording">
          <text>{{ recording ? '暂停录制' : '开始录制' }}</text>
        </view>
        <view class="record-time">{{ formatTime(recordingTime) }}</view>
      </view>
      
      <!-- 右侧翻转摄像头按钮 -->
      <view class="control-btn" @click="switchCamera">
        <text class="btn-text">翻转</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cameraPosition: 'back', // 摄像头位置，front为前置，back为后置
      recording: false, // 是否正在录制
      recordingTime: 0, // 录制时长（秒）
      timer: null, // 计时器
      cameraContext: null // 相机上下文
    }
  },
  onReady() {
    // 获取相机上下文
    this.cameraContext = uni.createCameraContext();
  },
  methods: {
    // 切换录制状态（开始/暂停）
    toggleRecording() {
      if (this.recording) {
        // 暂停录制
        this.pauseRecording();
      } else {
        // 开始录制
        this.startRecording();
      }
    },
    
    // 开始录制
    startRecording() {
      const that = this;
      this.cameraContext.startRecord({
        quality: 'high',
        success() {
          that.recording = true;
          // 开始计时
          that.startTimer();
        },
        fail(err) {
          console.error('录制失败', err);
          uni.showToast({
            title: '录制失败，请检查权限',
            icon: 'none'
          });
        }
      });
    },
    
    // 暂停录制
    pauseRecording() {
      const that = this;
      this.cameraContext.stopRecord({
        success(res) {
          that.recording = false;
          // 停止计时
          that.stopTimer();
          console.log('录制完成', res.tempVideoPath);
          // 这里可以处理录制完成后的视频，例如保存或上传
          uni.showToast({
            title: '录制已暂停',
            icon: 'none'
          });
        },
        fail(err) {
          console.error('停止录制失败', err);
        }
      });
    },
    
    // 开始计时器
    startTimer() {
      this.timer = setInterval(() => {
        this.recordingTime++;
      }, 1000);
    },
    
    // 停止计时器
    stopTimer() {
      clearInterval(this.timer);
      this.timer = null;
    },
    
    // 切换摄像头
    switchCamera() {
      this.cameraPosition = this.cameraPosition === 'back' ? 'front' : 'back';
    },
    
    // 格式化时间显示（00:00）
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const secs = seconds % 60;
      return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    },
    
    // 收起按钮（无功能）
    minimize() {
      // 这里可以添加收起功能的实现
      uni.showToast({
        title: '收起功能未实现',
        icon: 'none'
      });
    },
    
    // 相机错误处理
    onCameraError(e) {
      console.error('相机错误', e.detail);
      uni.showModal({
        title: '权限申请',
        content: '需要获取您的相机权限才能进行录制',
        success(res) {
          if (res.confirm) {
            uni.openSetting();
          }
        }
      });
    }
  },
  onUnload() {
    // 页面卸载时清除计时器
    this.stopTimer();
  }
}
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.camera {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2;
  pointer-events: none;
}

.status-bar {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}

.control-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150rpx;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.control-btn {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-text {
  color: white;
  font-size: 28rpx;
}

.record-btn-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.record-btn {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #FF3B30;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.record-btn.recording {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
}

.record-btn text {
  color: white;
  font-size: 28rpx;
}

.record-time {
  color: white;
  font-size: 24rpx;
  margin-top: 10rpx;
}
</style>